<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  template="../WEB-INF/template/template.xhtml">

  <f:metadata>
    <f:event type="preRenderView" listener="#{identity.checkLoggedIn()}"/>
  </f:metadata>

  <ui:define name="page_title">#{msgs['jsf.Dashboard']}</ui:define>
  <ui:define name="center_content">

    <script type="text/javascript">
      jQuery(function(){
        crossroads.addRoute(':pre*:/dashboard/settings/{subSection}/:?query:', function(pre, subSection, query) {
          zanata.tabs.activate(jQuery('#settings_tab'))
          subSection = subSection || 'account';
          subSection =
            validateTab("#" + subSection + '_tab', subSection, 'account');
          zanata.tabs.activate(jQuery('#' + subSection + '_tab'))
        });

        crossroads.addRoute(':pre*:/dashboard/:section:/:?query:', function(pre, section, query) {
          section = section || 'activity'
          section = validateTab('#' + section + "_tab", section, "activity");
          zanata.tabs.activate(jQuery('#' + section + "_tab"))
        });

        updateStateFromUrl();
      })
    </script>

    <ui:fragment rendered="#{identity.loggedIn}">
      <div class="g">
        <div class="g__item w--1-m w--3-8-l w--1-3 l--push-bottom-half">
          <p class="txt--meta l--push-all-0">
            <a href="#{request.contextPath}/dashboard">
              #{msgs['jsf.Dashboard']}
            </a>
          </p>
          <div class="g--loose">
            <h:panelGroup layout="block"  id="profile-overview" styleClass="g__item w--1-2-m">
              <div class="media l--push-bottom-half">
                <div class="media__item--right bx--round">
                  <img
                    src="#{dashboardAction.getUserImageUrl()}"
                    alt="#{dashboardAction.getUsername()}"/>
                </div>
                <div class="media__body">
                  <h1
                      class="ellipsis l--push-all-0">#{dashboardAction.getUserFullName()}</h1>
                  <ul class="list--no-bullets txt--meta">
                    <li><i class="i i--user list__icon" title="Username"></i> #{dashboardAction.getUsername()}
                    </li>
                    <li><i class="i i--language list__icon"
                      title="Spoken languages"></i>
                      <ui:fragment rendered="#{dashboardAction.getUserLanguageTeams().length() gt 0}">
                        #{dashboardAction.getUserLanguageTeams()}
                      </ui:fragment>
                      <ui:fragment rendered="#{dashboardAction.getUserLanguageTeams().length() lt 1}">
                        <a href="#{request.contextPath}/languages#{dswidQuery}">#{msgs['jsf.dashboard.settings.joinLangTeam.message']}</a>
                      </ui:fragment>
                    </li>
                    <li><i class="i i--users list__icon"
                      title="Roles"></i> #{dashboardAction.getUserRoles()}
                    </li>
                  </ul>
                </div>
              </div>
            </h:panelGroup>
            <div class="g__item w--1-2-m">
              <div class="tabs--lined js-tabs">
                <ul class="tabs__nav js-tabs-nav">
                  <li><a href="javascript:void(0);" id="activity-today_tab" class="is-active" data-content="#activity-today">#{msgs['jsf.activity.today.label']}</a></li>
                  <li><a href="javascript:void(0);" id="activity-week_tab" data-content="#activity-week">#{msgs['jsf.activity.week.label']}</a></li>
                  <li><a href="javascript:void(0);" id="activity-month_tab" data-content="#activity-month">#{msgs['jsf.activity.month.label']}</a></li>
                </ul>
                <ul class="tabsContent js-tabs-content l--pad-h-half l--pad-top-1">
                  <li id="activity-today" class="is-active">
                    <ui:include src="../WEB-INF/layout/dashboard/stats.xhtml">
                      <ui:param name="userStats" value="#{dashboardAction.getTodayStats()}"/>
                    </ui:include>
                  </li>
                  <li id="activity-week">
                    <ui:include src="../WEB-INF/layout/dashboard/stats.xhtml">
                      <ui:param name="userStats" value="#{dashboardAction.getWeekStats()}"/>
                    </ui:include>
                  </li>
                  <li id="activity-month">
                    <ui:include src="../WEB-INF/layout/dashboard/stats.xhtml">
                      <ui:param name="userStats" value="#{dashboardAction.getMonthStats()}"/>
                    </ui:include>
                  </li>
                </ul>
              </div>
            </div>
            <h:panelGroup layout="block" styleClass="g__item w--1-2-m l--push-top-1"
              rendered="#{dashboardAction.canCreateProject() or dashboardAction.canCreateGroup()}">
              <ui:fragment rendered="#{dashboardAction.canCreateProject()}">
                <a href="#" jsfc="h:link" class="button button--primary l--push-right-quarter"
                  outcome="/project/create_project.xhtml"
                  title="#{msgs['jsf.dashboard.projects.createNewProject.label']}">
                  <i  class="i i--add i--large"></i>
                  <span>#{msgs['jsf.dashboard.projects.newProject.label']}</span>
                </a>
              </ui:fragment>
              <ui:fragment rendered="#{dashboardAction.canCreateGroup()}">
                <a href="#" jsfc="h:link" class="button button--primary"
                  outcome="/version-group/create_version_group.xhtml"
                  title="#{msgs['jsf.dashboard.groups.createNewGroup.label']}">
                  <i  class="i i--add i i--large"></i>
                  <span>#{msgs['jsf.NewGroup.Label']}</span>
                </a>
              </ui:fragment>
            </h:panelGroup>
          </div>
        </div>
        <div class="g__item w--1-m w--5-8-l w--2-3">
          <div class="tabs--lined js-tabs">
            <ul class="tabs__nav js-tabs-nav">
              <li>
                <a id="activity_tab"
                  href="#{request.contextPath}/dashboard/activity"
                  class="js-url-mod" data-content="#activity">
                  <i class="i i--clock"></i>
                  <span class="is-hidden--s i__text--right">#{msgs['jsf.dashboard.activity.title']}</span>
                </a>
              </li>
              <li>
                <a id="projects_tab"
                  href="#{request.contextPath}/dashboard/projects"
                  class="js-url-mod" data-content="#projects">
                  <i class="i i--project"></i>
                  <span class="is-hidden--s i__text--right">#{msgs['jsf.dashboard.projects.title']}</span>
                </a>
              </li>
              <li>
                <a id="groups_tab"
                  href="#{request.contextPath}/dashboard/groups"
                  class="js-url-mod" data-content="#groups">
                  <i class="i i--group"></i>
                  <span class="is-hidden--s i__text--right">#{msgs['jsf.dashboard.groups.title']}</span>
                </a>
              </li>
              <li>
                <a id="tasks_tab"
                   href="#{request.contextPath}/dashboard/tasks"
                   class="js-url-mod" data-content="#tasks">
                  <i class="i i--group"></i>
                  <span class="is-hidden--s i__text--right">#{msgs['jsf.dashboard.tasks.title']}</span>
                </a>
              </li>
              <li class="tab__end">
                <a href="#{request.contextPath}/dashboard/settings"
                  id="settings_tab" class="js-url-mod" title="Account Settings"
                  data-content="#settings">
                <span
                  class="is-hidden--s i__text--left">#{msgs['jsf.dashboard.settings.tab.title']}</span>
                  <i class="i i--settings"></i>
                </a>
              </li>
            </ul>
            <ul class="tabsContent panels__container js-tabs-content l--push-top-1">
              <li id="activity">
                <ui:include src="/WEB-INF/layout/dashboard/activity.xhtml"/>
              </li>
              <li id="projects">
                <ui:include src="/WEB-INF/layout/dashboard/projects.xhtml"/>
              </li>
              <li id="groups">
                <ui:include src="/WEB-INF/layout/dashboard/groups.xhtml"/>
              </li>
              <li id="tasks">
                <ui:include src="/WEB-INF/layout/dashboard/tasks.xhtml"/>
              </li>
              <li id="settings">
                <ui:include src="/WEB-INF/layout/dashboard/settings.xhtml"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </ui:fragment>
  </ui:define>
</ui:composition>
